<!doctype html>
<html lang="en" xmlns:v-for="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
    <meta name="generator" content="Jekyll v4.0.1">
    <title>文章详情</title>
    <script src="assets/js/vendor/jquery-1.12.4.min.js"></script>
    <link rel="canonical" href="https://getbootstrap.com/docs/4.5/examples/blog/text-detail.html">

    <!-- Bootstrap core CSS -->
    <link href="assets/css/bootstrap.min.css" rel="stylesheet">

    <style>
        .bd-placeholder-img {
            font-size: 1.125rem;
            text-anchor: middle;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        @media (min-width: 768px) {
            .bd-placeholder-img-lg {
                font-size: 3.5rem;
            }
        }
    </style>
    <!-- Custom styles for this template -->
    <link href="https://fonts.googleapis.com/css?family=Playfair+Display:700,900" rel="stylesheet">
    <!-- Custom styles for this template -->
    <link href="assets/css/blog.css" rel="stylesheet">
</head>
<body>
<a name="top"></a>
<!-- 导入页眉 -->
<div class="header"></div>
<div id="div_comment">
    <div>
        <div class="container-fluid" style="background-color: #F8F8F9">
            <div class="container" style="margin-top: 50px">
                <div class="nav-scroller py-0 mb-0">
                </div>
                <div class="jumbotron p-4 p-md-5 text-white rounded " style="background-color:skyblue">
                    <div class="col-md-12 px-0">
                        <h1 class="display-4 " style="font-weight: 600">{{articleDetail.articleName}}</h1>
                        <div v-show="priceStatus===0">
                            <div id="price1" type="button" v-on:click="price" style="float: right;display: block;">
                                <svg id="heart" class="bi bi-heart" width="5em" height="5em" viewBox="0 0 16 16"
                                     fill="currentColor"
                                     xmlns="http://www.w3.org/2000/svg">
                                    <path fill-rule="evenodd"
                                          d="M8 2.748l-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01L8 2.748zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143c.06.055.119.112.176.171a3.12 3.12 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15z"/>
                                </svg>
                            </div>
                        </div>

                        <div v-show="priceStatus===1">
                            <div id="price2" type="button" v-on:click="canclePrice"
                                 style="float: right;display: block;">
                                <svg id="heart-fill" class="bi bi-heart-fill" width="5em" height="5em"
                                     viewBox="0 0 16 16"
                                     fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                    <path fill-rule="evenodd"
                                          d="M8 1.314C12.438-3.248 23.534 4.735 8 15-7.534 4.736 3.562-3.248 8 1.314z"/>
                                </svg>
                            </div>
                        </div>


                        <p class="lead my-3">发表日期：{{articleDetail.articleCreatetimeStr}}</p>
                        <p class="lead my-3">浏览量:{{article.articleView}}</p>
                        <p class="lead my-3">点赞数:{{article.articleLike}}</p>
                        <p class="lead mb-0">

                            <div class="row" style="color: black">分类：
                        <p class="lead mb-0" v-for="tag in tagList">
                            <small>{{tag.tagName}}&nbsp;&nbsp;&nbsp;</small>
                        </p>
                    </div>
                </div>
                <!--                <button type="button" class="btn btn-primary" @click="showArticle">Test</button>-->
            </div>
        </div>
    </div>
</div>

<main role="main" class="container">
    <div class="row">
        <div class="col-md-8 blog-main">

            <div class="blog-post" v-html="articleDetail.articleContain">
                <!-- 文章主体 -->
                <!--                    {{articleDetail.articleContain}}-->

            </div><!-- /.blog-post -->

            <hr>
            <h4>用户评论</h4>
            <div style="margin-top: 30px;margin-bottom: 10px;"
            >
                <div style="margin-top: 20px">
                    <div v-if="commentList==='暂无评论'">{{commentList}}</div>
                    <div v-else>
                        <div v-for="comment in commentList"
                             style="margin-top: 20px">

                            <ul class="list-group">
                                <li class="list-group-item">
                                    <div style="">
                                        <img src="">
                                        <label style="font-size: 15px;margin-right: 15px">用户名：{{comment.userName}}</label>
                                        <label style="font-size: 10px">评论时间：{{comment.commentTimeStr}}</label>
                                        <button class="btn btn-link" v-on:click="commitAudit" style="float: right">举报
                                        </button>
                                        <div style="border-style: solid ;border-radius: 15px;border-width:2px;
                height: 40px;margin-top: 4px">
                                            <p style="margin-top: 6px;margin-left: 15px"> {{comment.commentContent}}</p>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                            <!--回复列表-->

                            <div v-for="reply in replyList" style="background-color: whitesmoke;margin-top: 5px">
                                <div v-if="reply.commentId===comment.commentId">
                                    <label style="font-size: 15px;margin-left: 30px;margin-top: 8px">{{reply.replyUserName}}回复&nbsp&nbsp{{reply.commentUserName}}：</label>
                                    <b style=""> {{reply.replyContent}}</b>
                                    <label style="font-size: 5px;margin-left: 20px;">回复时间：{{reply.replyCreatTimeStr}}</label>
                                    <div id="respondedUserName" style="display: none">{{reply.replyUserName}}</div>
                                    <!-- Button trigger modal -->
                                    <button type="button" class="btn btn-link" data-toggle="modal"
                                            data-target="#exampleModal" style="float: right">
                                        回复
                                    </button>
                                    <!-- Modal -->
                                    <!--<div class="modal fade" id="exampleModal2" tabindex="-1" role="dialog"
                                         aria-labelledby="exampleModalLabel" aria-hidden="true">
                                        <div class="modal-dialog">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <button type="button" class="close" data-dismiss="modal"
                                                            aria-label="Close">
                                                        <span aria-hidden="true">&times;</span>
                                                    </button>
                                                </div>
                                                <div class="modal-body">
                                                    <form>
                                                        <div class="form-group">
                                                            <label for="respondChild">回复内容</label>
                                                            <input type="text" class="form-control" id="respondChild"
                                                                   aria-describedby="respondChild">
                                                        </div>
                                                    </form>
                                                </div>
                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-secondary"
                                                            data-dismiss="modal">取消
                                                    </button>
                                                    <button type="button" class="btn btn-primary">确认</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>-->
                                    <!--<div v-for="respond in respondedToReplyList">
                                        <div v-if="respond.respondedToUserName===reply.replyUserName">
                                            <label style="font-size: 15px;margin-left: 30px;margin-top: 8px">{{respond.replyUserName}}回复&nbsp&nbsp{{respond.respondedToUserName}}：</label>
                                            <b style=""> {{respond.replyContent}}</b>
                                            <label style="font-size: 5px;margin-left: 20px;">回复时间：{{respond.replyCreatTimeStr}}</label>
                                            <button type="button" class="btn btn-link" data-toggle="modal"
                                                    data-target="#exampleModal" style="float: right">
                                                回复
                                            </button>
                                            &lt;!&ndash; Modal &ndash;&gt;
                                            &lt;!&ndash;<div class="modal fade" id="exampleModal2" tabindex="-1" role="dialog"
                                                 aria-labelledby="exampleModalLabel" aria-hidden="true">
                                                <div class="modal-dialog">
                                                    <div class="modal-content">
                                                        <div class="modal-header">
                                                            <button type="button" class="close" data-dismiss="modal"
                                                                    aria-label="Close">
                                                                <span aria-hidden="true">&times;</span>
                                                            </button>
                                                        </div>
                                                        <div class="modal-body">
                                                            <form>
                                                                <div class="form-group">
                                                                    <label for="respondChild">回复内容</label>
                                                                    <input type="text" class="form-control"
                                                                           id="respondChild"
                                                                           aria-describedby="respondChild">
                                                                </div>
                                                            </form>
                                                        </div>
                                                        <div class="modal-footer">
                                                            <button type="button" class="btn btn-secondary"
                                                                    data-dismiss="modal">取消
                                                            </button>
                                                            <button type="button" class="btn btn-primary">确认</button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>&ndash;&gt;
                                        </div>
                                    </div>-->

                                </div>
                                <div v-else></div>
                            </div>


                            <!--回复功能-->
                            <div style="margin-top: 5px">
                                <button v-on:click="replyComment" :test="comment.commentId" :id="comment.commentId"
                                        type="submit" class="btn btn-primary" style="display: block;float: left">回复
                                </button>
                                <button v-on:click="cancelReplyComment" :id="'tr-'+comment.commentId"
                                        :test="comment.commentId"
                                        type="submit" class="btn btn-primary" style="display: none;float: left">取消回复
                                </button>
                                <button @click="replyShow(comment.commentId)" :replyComment="comment.commentId"
                                        :id="'show'+comment.commentId"
                                        type="submit" class="btn btn-primary" style="display: block;margin-left: 80px">
                                    查看所有回复
                                </button>
                                <div :id="'send'+comment.commentId" class="input-group"
                                     style="display: none">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text">回复{{comment.userName}}： </span>
                                    </div>
                                    <textarea :id="'test'+comment.commentId" class="form-control"
                                              aria-label="With textarea"></textarea>
                                    <button id="determine" v-on:click="reply" :commentId="comment.commentId"
                                            type="submit"
                                            class="btn btn-primary"
                                            style="display: block">发送
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div><!-- /.blog-main -->

        <aside class="col-md-4 blog-sidebar">
            <div class="p-4 mb-3 bg-light rounded">
                <h4 class="font-italic" v-html="">文章简介</h4>
                <!-- 文章简介主体 -->
                <div v-html="articleDetail.articleIntroduction"></div>
            </div>
            收藏：
            <div id="collect1" type="button" onclick="collect()" style="display: block;">
                <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="currentColor" class="bi bi-star"
                     viewBox="0 0 16 16">
                    <path fill-rule="evenodd"
                          d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256 4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73 3.523-3.356c.329-.314.158-.888-.283-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356-.83 4.73zm4.905-2.767l-3.686 1.894.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288l1.847-3.658 1.846 3.658a.525.525 0 0 0 .393.288l4.052.575-2.906 2.77a.564.564 0 0 0-.163.506l.694 3.957-3.686-1.894a.503.503 0 0 0-.461 0z"/>
                </svg>
            </div>
            <div id="collect2" type="button" onclick="cancleCollect()" style="display: none;">
                <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="currentColor"
                     class="bi bi-star-fill" viewBox="0 0 16 16">
                    <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.283.95l-3.523 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
                </svg>
            </div>
            <div class="p-4" style="position: fixed;right: 0px;bottom: 0px;">
                <h4 class="font-italic">回到顶部</h4>
                <svg class="bi bi-capslock-fill" width="3em" height="3em" viewBox="0 0 16 16" fill="currentColor"
                     xmlns="http://www.w3.org/2000/svg">
                    <a href="#top">
                        <path fill-rule="evenodd"
                              d="M7.27 1.047a1 1 0 0 1 1.46 0l6.345 6.77c.6.638.146 1.683-.73 1.683H11.5v1a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1v-1H1.654C.78 9.5.326 8.455.924 7.816L7.27 1.047zM4.5 13.5a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1v-1z"/>
                    </a>
                </svg>
            </div>
        </aside><!-- /.blog-sidebar -->

    </div><!-- /.row -->

</main><!-- /.container -->

<div style="background-color: whitesmoke;padding-top: 20px;padding-bottom: 180px">
    <form class="container">
        <div class="form-group" style="text-align: center">
            <label style="font-size: 30px">添加评论</label>
            <input id="commentContent" type="text" class="form-control" aria-describedby="emailHelp"
                   placeholder="Enter comment">
        </div>
        <button type="button" class="btn btn-primary" onclick="addComment()" style="margin-top: 8px">评论</button>
    </form>
</div>
</div>
<!-- 导入页脚 -->
<div class="footer"></div>
<!--导入vue 包-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="assets/js/util/HttpUtil.js"></script>
<script type="text/javascript">
    //在js中引入页眉页脚
    $(document).ready(function () {
        $('.header').load('header.html');
        $('.footer').load('footer.html');
    });
</script>
</body>
</html>
<script>
    var artiId = null;
    let vm = new Vue({
        el: "#div_comment",
        data: {
            commentList: [],
            priceAll: [],
            replyList: [],
            articleDetail: [],
            tagList: [],
            article: {},
            respondedToReplyList: [],
            priceStatus: "",
        },
        methods: {
            refreshCommentList: function () {
                //请求服务器，根据文章id获取评论列表参数
                let url = "commentShowInArticle.do";
                thisObj = this;
                let data = this.getUrlParam("articleId")
                console.log(data);
                let params = {articleId: data};
                var thisObj = this;
                doCasualPost(url, function (resp) {
                    //更变commenList的值
                    console.log(resp);
                    thisObj.commentList = resp;
                }, params)
            },
            /*refreshPriceAllNum: function () {
                //请求服务器，获取点赞数
                let url = "commentShowInArticle.do";
                var thisObj = this;
                doGet(url, function (resp) {
                    //更变commenList的值
                    console.log(resp);
                    thisObj.priceAll = resp;
                })
            },*/
            //开启回复
            replyComment: function (e) {
                var that = e.target;
                console.log($(that).attr("test"));
                var replyId = $(that).attr("test");
                $("#" + replyId).toggle("fast");
                $("#tr-" + replyId).toggle("fast");
                $("#send" + replyId).toggle("fast");
            },
            //取消回复
            cancelReplyComment: function (e) {
                var that = e.target;
                console.log($(that).attr("test"));
                var cancleReplyId = $(that).attr("test");
                $("#" + cancleReplyId).toggle("fast");
                $("#tr-" + cancleReplyId).toggle("fast");
                $("#send" + cancleReplyId).toggle("fast");
            },
            //回复功能
            reply: function (e) {
                var that = e.target;
                console.log($(that).attr("commentId"));
                var commentId = $(that).attr("commentId");
                //获取id
                thisObj = this;
                let articleId = this.getUrlParam("articleId");
                console.log(articleId);
                //获取评论内容
                let replyContent = $("#test" + commentId).val();
                console.log(replyContent);
                let params = {articleId: articleId, commentId: commentId, replyContent: replyContent};
                let url = "reply.do";

                doCasualPost(url, function (resp) {
                    alert(resp);
                    thisObj = this;
                    let articleId = this.getUrlParam("articleId");
                    location.href = "articleDetail.html?articleId=" + articleId;
                }, params)
            },
            //展示回复功能
            replyShow: function (commentId) {
                //获取回复内容
                /*let that = e.target;
                let commentId = $(that).attr("replyComment");*/
                //获取id
                thisObj = this;
                let articleId = this.getUrlParam("articleId")
                let url = "replyShow.do";
                console.log(articleId + "articleId");
                console.log(commentId + "commentId");
                let params = {articleId: articleId, commentId: commentId};
                var thisObj = this;
                doCasualPost(url, function (resp) {
                    //更变replyList的值
                    console.log(resp);
                    thisObj.replyList = resp;
                }, params)
            },
            //获取地址参数
            getUrlParam: function (name) {
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
                var r = window.location.search.substr(1).match(reg);  //匹配目标参数
                if (r != null) return unescape(r[2]);
                return null; //返回参数值
            },
            getArticle: function () {
                thisObj = this;
                let id = this.getUrlParam("articleId");
                artiId = id;
                let url = "detail.do";
                let param = {
                    articleId: id
                };
                console.log(param);
                doPost(url, param, function (resp) {
                    thisObj.articleDetail = resp
                })
            },
            showArticle: function () {
                thisObj = this;
                console.log(thisObj.articleDetail)
            },
            showArticleTag: function () {
                console.log("showList")
                thisObj = this;
                let id = this.getUrlParam("articleId");
                let url = "getTag.do";
                let param = {articleId: id};
                console.log(param);
                postWithoutJson(url, param, function (resp) {
                    thisObj.tagList = resp;
                    console.log(resp)
                })
            },
            articleParticulars: function () {
                console.log("showList")
                thisObj = this;
                let id = this.getUrlParam("articleId");
                let url = "getArticleParams.do";
                let param = {articleId: id};
                console.log(param);
                postWithoutJson(url, param, function (resp) {
                    thisObj.article = resp;
                    console.log(resp)
                })
            },
            //举报评论
            commitAudit: function (commentId) {
                let url = "reportComment.do";
                let articleId = this.getUrlParam("articleId");
                let params = {commentId: commentId};
                let thisObj = this;
                doCasualPost(url, function (resp) {
                    thisObj.reportMessage = resp;
                    alert(resp);
                    location.href = "http://localhost:8080/blog_view/articleDetail.html?articleId=" + articleId;
                }, params)
            },
            checkPriceStatus: function () {
                let url = "getPriceStatus.do";
                let articleId = this.getUrlParam("articleId");
                let params = {articleId: articleId};
                let thisObj = this;
                doCasualPost(url, function (resp) {
                    thisObj.priceStatus = resp;
                    console.log(thisObj.priceStatus + "~~~~~~~~");
                }, params)
            },
            respondedTo: function () {
                var replyContent = $("#respond").val();
                let respondedUserName = $("#respondedUserName").text();
                let params = {replyContent: replyContent, respondedUserName: respondedUserName};
                let url = "";
                doCasualPost(url, function (resp) {
                    thisObj.priceStatus = resp;
                    console.log(thisObj.priceStatus + "~~~~~~~~");
                }, params)
            },
            respondedToShow: function () {
                //获取id
                let url = "";

                let params = {respondedToId: articleId};
                var thisObj = this;
                doCasualPost(url, function (resp) {
                    //更变replyList的值
                    console.log(resp);
                    thisObj.replyList = resp;
                }, params)
            }

        },

        mounted: function () {
            //页面加载完成，并且vue对象加载完成之后调用
            this.articleParticulars();
            this.showArticleTag();
            this.refreshCommentList();
            /*this.refreshPriceAllNum();*/
            this.getArticle();
            this.replyShow();
            this.showArticleTag();
            this.checkPriceStatus();

        },
        created: function () {
            console.log("created");
        }
    });

    function price() {
        console.log("price");
        $("#price1").toggle("slow");
        $("#price2").toggle("slow");
        let url = "InsertPraise.do";
        let priceStatus = 1;
        /*let id = window.location.search;*/
        let articleId = artiId;
        let params = {articleId: articleId, priceStatus: priceStatus}
        doCasualPost(url, function (resp) {
            console.log(resp + "++++++");
            alert(resp);
            window.location.reload()
            //location.href = "http://localhost:8080/blog_view/articleDetail.html?articleId=" + articleId;
        }, params)
    }

    function canclePrice() {
        console.log("canclePrice");
        $("#price2").toggle("slow");
        $("#price1").toggle("slow");
        let url = "update.do";
        let priceStatus = 0;
        /*let id = window.location.search;*/
        let articleId = artiId;
        let params = {articleId: articleId, priceStatus: priceStatus}
        doCasualPost(url, function (resp) {
            alert(resp);
            window.location.reload()
            //location.href = "http://localhost:8080/blog_view/articleDetail.html?articleId=" + articleId;
        }, params)
    }

    function collect() {
        console.log("collect");
        $("#collect1").toggle("slow");
        $("#collect2").toggle("slow");
        let url = "collect.do";
        let collectStatus = 1;
        /*let id = window.location.search;
        var articleId = id.substring(11, 12);*/
        let articleId = artiId;
        console.log("收藏" + articleId)
        let params = {articleId: articleId, collectStatus: collectStatus}
        doCasualPost(url, function (resp) {
            console.log(resp + "++++++");
            alert(resp);
        }, params)
    }

    function cancleCollect() {
        console.log("cancleCollect");
        $("#collect1").toggle("slow");
        $("#collect2").toggle("slow");
        let url = "collectmodify.do";
        let collectStatus = 0;
        /*et id = window.location.search;
        var articleId = id.substring(11, 12);*/
        let articleId = artiId;
        let params = {articleId: articleId, collectStatus: collectStatus}
        doCasualPost(url, function (resp) {
            alert(resp);
        }, params)
    }

    function collectOrCancle() {
        $("#collect1").toggle("fast");
        $("#collect2").toggle("fast");
    }

    function addComment() {
        let id = window.location.search;
        var articleId = id.substring(11, 12);
        console.log(articleId);
        //添加评论
        let url = "comment.do";
        let comment = $("#commentContent").val();
        console.log(comment);
        let params = {commentContent: comment, articleId: articleId};
        //var thisObj = this;
        doCasualPost(url, function (resp) {
            //获取回传的值
            console.log(resp);
            alert(resp);
            location.href = "articleDetail.html?articleId=" + articleId;
        }, params)
    }
</script>
